<template>
  <div class="m-order-detail">

    <!-- 买家信息 -->
    <div class="order-buyer-info clearfix">
      <!-- <w-mange-title title="买家信息"></w-mange-title> -->
      <!-- 左边 -->
      <!-- <div class="buyer-info fl">
        <span class="buyer-title">收货人地址：{{infoList.receiverArea}}</span>
        <br>
        <span class="buyer-title">买家留言：{{infoList.msg}}</span>
        <br>
        <span class="buyer-title">买家：{{infoList.userName}}</span>
        <br>
        <span class="buyer-title">收货人手机号：{{infoList.receiverMobile}}</span>
      </div> -->
      <!-- 右边 -->
      <div class="order-info">
        <div class="order-status">
          <div class="clearfix">
            <div class="icon-status fl">
              <img src="../../assets/dingdanzhuantai.png" alt="">
            </div>
            <div class="order-del">
              <h2 style="margin-bottom: 10px;" v-if="infoList.sysSettlementMark == 0 || infoList.settlementMark == 0 || infoList.settlementMark == 4 || infoList.sysSettlementMark == 4">订单状态：等待结算</h2>
              <h2 style="margin-bottom: 10px;" v-if="infoList.sysSettlementMark == 2 || infoList.sysSettlementMark == 3 || infoList.settlementMark == 2 || infoList.settlementMark == 3">订单状态：已结算</h2>
              <div>
                <span style="font-weight: bold; margin-right: 20px" v-if="infoList.sysSettlementMark == 1">平台结算：结算中</span>
                <span style="font-weight: bold; margin-right: 20px" v-if="infoList.sysSettlementMark == 2">平台结算：结算完成</span>
                <span style="font-weight: bold; margin-right: 20px" v-if="infoList.sysSettlementMark == 3">平台结算：结算失败</span>
                <span style="font-weight: bold; margin-right: 20px" v-if="infoList.sysSettlementMark == 4">平台结算：农商行订单结算确认中</span>
                <span style="font-weight: bold; margin-right: 20px" v-if="infoList.settlementMark == 1">商家结算：成功</span>
                <span style="font-weight: bold; margin-right: 20px" v-if="infoList.settlementMark == 2">商家结算：结算完成</span>
                <span style="font-weight: bold; margin-right: 20px" v-if="infoList.settlementMark == 3">商家结算：结算失败</span>
                <span style="font-weight: bold; margin-right: 20px" v-if="infoList.settlementMark == 4">商家结算：农商行订单结算确认中</span>
                <span style="font-weight: bold; margin-right: 20px">发货方：{{infoList.consignor | consignor}}</span>
              </div>
              <div>
                <span style="font-weight: bold;margin-left: 16px;">订单流水号：{{infoList.orderId}}</span>
              </div>
            </div>
          </div>

          <!-- 你可以进行的操作 -->
          <div class="buyer-options">
            你可以：
            <div class="btns-group">
              <w-button-group>
                <w-button type="option" class="free-look" @on-click="favPanel = true">查看订单优惠明细</w-button>
                <w-button type="option" v-if="infoList.settlementMark == 0" @on-click="fetchBalanceInfo(infoList.id, infoList.paymentMark)">结算</w-button>
                <w-button type="option" v-if="infoList.settlementMark == 3" @on-click="fetchBalanceInfo(infoList.id, infoList.paymentMark)">再次结算</w-button>
              </w-button-group>
            </div>
          </div>

          <!-- 你还可以进行的操作 -->
          <div class="buyer-options-other">
            您还可以：
            <span class="t-under btn-t" @click="onLookTip">查看好下单提醒</span>
            <span class="t-under" v-if="infoList.storeSign && infoList.storeSign != null" @click="signStatus = true">查看标记</span>
          </div>

        </div>
      </div>
    </div>

    <!-- 品台结算 -->
    <!-- <div class="after-b"> -->

      <!-- 商家信息 -->
      <!-- <div class="store-account">
        <w-mange-title title="商家账号"></w-mange-title>
        <div class="store-info">
          <div>
            <span>账户类型：企业账户</span>
          </div>
          <div>
            <span>账户名称：浙江优正网络科技有限公司</span>
          </div>
          <div>
            <span>账户号码：98798778623532638</span>
          </div>
          <div>
            <span>开户行：招商银行奥体支行</span>
          </div>
          <div>
            <span>开户行城市：江苏省南京市</span>
          </div>
        </div>
      </div> -->

      <!-- 平台信息 -->
      <!-- <div>
        <w-mange-title title="平台账号"></w-mange-title>
        <div class="store-info">
          <div>
            <span>账户类型：企业账户</span>
          </div>
          <div>
            <span>账户名称：浙江优正网络科技有限公司</span>
          </div>
          <div>
            <span>账户号码：98798778623532638</span>
          </div>
          <div>
            <span>开户行：招商银行奥体支行</span>
          </div>
          <div>
            <span>开户行城市：江苏省南京市</span>
          </div>
        </div>
      </div> -->
      
      <!-- 账单信息 -->
      <!-- <div>
        <w-mange-title title="账单信息"></w-mange-title>
        <div class="store-info">
          <div>
            <span>商家结算金：¥{{infoList.settlementMoney | currency}}</span>
          </div>
          <div>
            <span>平台结算金：¥{{infoList.sysSettlementMoney | currency}}</span>
          </div>
        </div>
      </div>
    </div> -->

    <!-- 商品信息 -->
    <div>
      <w-mange-title title="商品信息"></w-mange-title>
      <div class="store-info">
        <div>
          <span>订单号：{{infoList.orderId}}</span>
        </div>
        <div>
          <span>下单时间：{{infoList.addTime || '数据缺失'}}</span>
        </div>
        <div>
          <span>付款时间：{{infoList.payTime || '数据缺失'}}</span>
        </div>
        <div>
          <span v-if="infoList.orderStatus == 40">订单状态：已收货</span>
          <span v-if="infoList.orderStatus == 50">订单状态：已评价</span>
        </div>
        <div>
          <span>订单总额：￥{{(infoList.goodsAmount + infoList.shipPrice - 0) || 0 | currency}}</span>
        </div>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="orders">
      <div class="tab-bg">
        <w-table :columns="columns"></w-table>
      </div>

      <div class="order-lists">
        <table v-for="(goods, goodsIndex) in JSON.parse(infoList.goodsInfo || '[]')" :key="goodsIndex">
          <tr v-for="(gsp, gspIndex) in goods.goodsGsp" :key="gspIndex">
            <td style="width: 40%">
              <div class="goods-info clearfix">
                <div class="goods-img fl">
                  <img v-lazy="goods.goods_mainphoto_path" alt="">
                </div>
                <div class="goods">
                  <p class="p-line-hide">{{goods.goods_name}} {{goods.goodsSerial}}</p>
                  <div class="sku">
                    <span>{{gsp.goodsSpecName[0]}}：{{gsp.goodsSpecContent[0]}}</span>
                    <span>{{gsp.goodsSpecName[1]}}：{{gsp.goodsSpecContent[1]}}</span>
                  </div>
                </div>
              </div>
            </td>
            <td style="width: 20%">¥{{gsp.goodsSinglePrice | currency}}</td>
            <td style="width: 20%">{{gsp.count || 0}}</td>
            <td style="width: 20%" :rowspan="gspLen" v-if="gspIndex == 0 && goods.reviseGoodsPrice != ''">{{(gsp.goodsSinglePrice - goods.reviseGoodsPrice)*goods.goodsTotalcount || 0 | currency}}</td>
            <td style="width: 20%" :rowspan="gspLen" v-if="gspIndex == 0 && goods.reviseGoodsPrice == ''">0</td>
          </tr>
        </table>
      </div>

      <!-- 订单结算 -->
      <div class="order-amount clearfix">
        <div class="fr">
          <div class="goods-all fl ">
            <span>商品总价： ¥{{infoList.goodsAmount | currency}}</span>
            <br>
            <span>店铺优惠： ¥{{infoList.subtrahendPrice || 0 | currency}}</span>
            <br>
            <span>运费： ¥{{infoList.shipPrice | currency}}</span>
          </div>
          <div class="order-all fr">
            <p>平台结算金： ¥{{(infoList.sysSettlementMoney || 0) | currency}}</p>
            <p>商家结算金：<span style="color: #C6000E">¥{{infoList.settlementMoney | currency}}</span></p>
          </div>
        </div>
      </div>
    </div>

    <!-- 返回列表按钮 -->
    <!-- <div>
      <w-button type="colse">返回列表</w-button>
    </div> -->

    <!-- 查看优惠明细弹出框 -->
    <w-panel-fixed-wrap v-model="favPanel" title="查看订单优惠明细" :show-btns="!favPanel" :panel-title="favPanel" :show-close="favPanel" :width="`300px`" :height="`280px`">
      <p>商品优惠：¥{{infoList.subtrahendPrice || 0 | currency}}</p>
      <p>运费优惠：¥{{(infoList.originalShipPrice - infoList.shipPrice) || 0 | currency}}</p>
    </w-panel-fixed-wrap>

    <!-- 标记弹出框 -->
    <w-panel-fixed-wrap v-model="signStatus" title="标记备注" :show-btns="showBtnsSign" :panel-title="panelTitleSign" :show-close="showCloseSign">
      <div class="sign-panel">
        <span style="vertical-align: top">标记备注：</span>
        <div class="remark">
          <p>{{infoList.storeSignInfo}}</p>
        </div>
      </div>
    </w-panel-fixed-wrap>
    
    <!-- 查看好下单提醒 -->
    <w-panel-fixed-wrap :show-btns="false" :panel-title="tipPanel" :show-close="tipPanel" title="好下单提醒" v-model="tipPanel" :width="`357px`" :height="`308px`">
      <div class="tip-panel">
        <span>好下单提醒：您的快递已发出，请您稍等几天。</span>
      </div>
    </w-panel-fixed-wrap>

    <!-- 结算弹框 -->
    <w-panel-fixed-wrap v-model="accountPanel" :width="`1060px`" :height="`542px`" :confirm-text="`结算完成`" @on-confirm="onConfirmBalance">
      <div class="m-account-panel">
        <div class="all-account">
          <w-table :columns="accountColumns"></w-table>
          <div class="all-num">
            <table class="table" v-for="(order, orderIndex) in balanceInfo.orderList" :key="orderIndex">
              <tr v-for="(info, index) in order.goodsInfo" :key="index">
                <td style="width: 16%" :rowspan="len" v-if="index == 0">{{order.orderId}}</td>
                <td style="width: 14%;overflow: hidden;max-width: 20px;" :rowspan="len" v-if="index == 0">{{order.storeName}}</td>
                <td style="width: 10%;overflow: hidden;max-width: 20px;">{{info.goodsSerial}}</td>
                <td class="price" style="width: 7%">¥{{info.factoryPrice | currency}}</td>
                <td class="price" style="width: 6%">¥{{order.isChangePrice == 1 ? info.reviseGoodsPrice : info.goodsGsp[0].goodsSinglePrice | currency}}</td>
                <td style="width: 6%">{{info.goodsTotalcount}}</td>
                <td class="price" style="width: 9%;" :rowspan="len" v-if="index == 0">¥{{order.totalPrice | currency}}</td>
                <td class="price" style="width: 6%" :rowspan="len" v-if="index == 0">¥{{order.shipPrice || 0 | currency}}</td>
                <td style="width: 6%" :rowspan="len" v-if="index == 0">{{order.consignor | consignor}}</td>
                <td class="price c-price" style="width: 10%" :rowspan="len" v-if="index == 0">¥{{order.sysSettlementMoney | currency}}</td>
                <td class="price c-price" style="width: 10%" :rowspan="len" v-if="index == 0">¥{{order.settlementMoney | currency}}</td>
              </tr>
            </table>
          </div>
          <div class="order-info">
            <div>
              <span class="span">订单结算总额：<span class="c-price">{{balanceInfo.orderTotalPrice | currency}}</span>元</span>
              <span class="span">平台结算金额：<span class="c-price">{{balanceInfo.pingtaiTot | currency}}</span>元</span>
              <span class="span">商家结算金额：<span class="c-price">{{balanceInfo.shangjiaTot | currency}}</span>元</span>
            </div>
            <p class="tip">友情提醒：<span style="padding-right: 10px;">商家结算金=订单中商品总出厂价+运费(订单发货方为商家)</span> 平台结算金=订单总金额-商家结算金</p>
          </div>
        </div>
        <div class="account-info">
          <!-- 商家信息 -->
          <div class="store-account">
            <w-mange-title title="商家账号"></w-mange-title>
            <div class="store-info-panel">
              <div>
                <span>账户类型：{{storeBank.bankType | bankType}}</span>
              </div>
              <div>
                <span>账户名称：{{storeBank.trueName}}</span>
              </div>
              <div>
                <span>账户号码：{{storeBank.bankNumber}}</span>
              </div>
              <div>
                <span>开户行：{{storeBank.bankName}}</span>
              </div>
              <div>
                <span>开户行城市：{{storeBank.bankAddress}}</span>
              </div>
            </div>
          </div>

          <!-- 平台信息 -->
          <div>
            <w-mange-title title="平台账号"></w-mange-title>
            <div class="store-info-panel">
              <div>
                <span>账户类型：{{platBank.bankType | bankType}}</span>
              </div>
              <div>
                <span>账户名称：{{platBank.trueName}}</span>
              </div>
              <div>
                <span>账户号码：{{platBank.bankNumber}}</span>
              </div>
              <div>
                <span>开户行：{{platBank.bankName}}</span>
              </div>
              <div>
                <span>开户行城市：{{platBank.bankAddress}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

  </div>
</template>

<script>
import { apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      gspLen: 0, // 每个商品的sku数量
      goodsInfo: [],
      favPanel: false,
      signStatus: false,
      showCloseSign: true,
      panelTitleSign: true,
      showBtnsSign: false,
      columns: [
        {title: '货品', width: '40%'},
        {title: '单价', width: '20%'},
        {title: '数量', width: '20%'},
        {title: '优惠', width: '20%'}
      ],
      tipPanel: false, // 查看好下单提醒
      changeColumns: [
        {title: '商品', width: '38%'},
        {title: '单价', width: '14%'},
        {title: '修改单价', width: '16%'},
        {title: '折扣', width: '16%'},
        {title: '优惠', width: '16%'}
      ],
      infoList: {},
      accountPanel: false,
      accountColumns: [
        {title: '订单号', width: '16%'},
        {title: '商家', width: '14%'},
        {title: '货号', width: '10%'},
        {title: '商品出厂价', width: '7%'},
        {title: '平台价', width: '6%'},
        {title: '数量', width: '6%'},
        {title: '订单总额', width: '9%'},
        {title: '运费', width: '6%'},
        {title: '发货方', width: '6%'},
        {title: '平台结算金额', width: '10%'},
        {title: '商家结算金额', width: '10%'}
      ],
      balanceInfo: {},
      storeBank: {},
      platBank: {},
      len: 0,
      orderId: [],
      paymentMark: ''
    }
  },
  computed: {
    ...mapGetters(['token']),
    /**
     * 计算流程图width
     */
    width() {
      return `${100 / this.proces.length}%`
    }
  },
  created() {
    if (!this.$route.params.orderid) return
    this.fetchOrderDetail()
  },
  methods: {
    /**
     * 查看订单详情
     */
    fetchOrderDetail() {
      apiOrderMange.apiBalanceInfo(this.token, this.$route.query.three, this.$route.params.orderid).then(data => {
        this.infoList = data.data.bean || {}
        this.goodsInfo = JSON.parse(this.infoList.goodsInfo || '[]') // 获取商品信息
        this.goodsInfo.forEach(goods => {
          this.$set(goods, 'reviseGoodsPrice', goods.reviseGoodsPrice || '')
          this.gspLen += goods.goodsGsp.length // 计算商品的sku个数
        })
      })
    },
    /**
     * 查看结算详情信息
     */
    fetchBalanceInfo(orderId, paymentMark) {
      const idArr = []
      idArr.push(orderId)
      apiOrderMange.apiBalanceDetail(this.token, this.$route.query.three, paymentMark, idArr).then(data => {
        // 判断结算信息是否完整
        if (data.code != 200 || !data.code || data.code == 'undefined') {
          return
        }
        this.balanceInfo = data.data || {}
        this.accountPanel = true // 展示结算弹框
        this.balanceInfo.orderList.forEach(list => {
          list.goodsInfo = JSON.parse(list.goodsInfo || '[]')
          this.len += list.goodsInfo.length
        })
        this.storeBank = this.balanceInfo.storeBank // 商家账户信息
        this.platBank = this.balanceInfo.platBank // 拼团账户信息
      })
      this.orderId = idArr
      this.paymentMark = paymentMark
    },
    /**
     * 结算
     */
    onConfirmBalance() {
      apiOrderMange.apiBalanceSave(this.token, this.$route.query.three, this.paymentMark, this.orderId).then(resp => {
        this.$toast('结算操作成功', () => {
          this.accountPanel = false
          this.fetchOrderDetail() // 重新获取结算订单详情
        })
      })
    },
    /**
     * 查看物流信息
     */
    onLookDev() {
      this.lookDevPanel = true
    },
    /**
     * 查看好下单提醒
     */
    onLookTip() {
      this.tipPanel = true
    }
  },
  filters: {
    /**
     * 过滤账户类型
     */
    bankType(type) {
      if (!type) return
      if (type == 1) {
        return '个人账户'
      } else if (type == 2) {
        return '企业账户'
      }
    }
  }
}
</script>

<style lang="scss">
.m-order-detail {
  .g-panel-fixed {
    .btn {
      width: 140px !important;
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.m-account-panel {
  .all-account {
    border-bottom: 1px solid #D7D7D7;
    .all-num {
      width: 100%;
      margin-top: 12px;
      .table {
        height: 76px;
      }
      .num {
        display: inline-block;
      }
      .price {
        font-weight: bold;
        font-size: 14px;
      }
    }
    .c-price {
      color: #D50000
    }
    .order-info {
      margin: 18px auto;
      .span {
        font-size: 16px;
        padding-right: 20px;
      }
      .tip {
        font-size: 12px;
        color:#222222;
      }
    }
  }
  .account-info {
    .store-info-panel {
      padding-left: 15px;
      font-size: 12px;
      & > div {
        width: 30%;
        display: inline-block;
        margin-bottom: 4px;
      }
    }
  }
}
// 物流
.dev-info {
  .dev-title {
    border-bottom: 1px solid $border-gray-light;
    padding-bottom: 8px;
    span {
      font-weight: 600;
    }
  }
  // 物流时间轴
  .logistics {
    padding: 15px 0 20px 0;
    .time-group {
      margin-bottom: 14px;
      position: relative;
      &:first-child {
        &::before {
          background-image: url(../../assets/logistics-now.png);
        }
        .date-week {
          color: #FF6C00 !important;
        }
      }
      &:last-child {
        margin-bottom: 0;
        &::after {
          background-color: transparent;
        }
      }
      .time-number {
        width: 120px;
        text-align: center;
        padding: 0px 0px 12px 0px;
        
        .date {
          font-size: 12px;
          color: #9B9B9B;
          margin-bottom: 8px;
        }
        .date-week {
          color: #333333;
          font-size: 14px;
        }
        .week {
          margin-left: 8px;
        }

      }
      .logistics-info {
        position: relative;
        display: inline-block;
        margin: 8px 0 20px 50px;
        max-width: 550px;
      }

      &:after {
        content: "";
        display: block;
        position: absolute;
        height: calc(100% - 0px);
        width: 2px;
        top: 28px;
        left: 138px;
        background-color: #DDDDDD;
      }

      &:before {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        position: absolute;
        top: 10px;
        left: 130px;
        right: 20px;
        z-index: 10;
        background-image: url(../../assets/logistics-over.png);
        background-repeat: no-repeat;
      }
      .clear {
        clear: both;
        overflow: hidden;
      }
    }
  }
} 

.order-lists {
  border: 1px solid $border-gray-light;
  margin-top: 10px;
  margin-bottom: 20px;
  table {
    width: 100%;
    margin: 10px 0 10px 10px;
    td {
      text-align: center;
    }
  }
}
.t-under {
  text-decoration: underline;
  margin-right: 18px;
  font-size: 12px;
  cursor: pointer;
}
.btn-t {
  color: rgba(74,144,226,1);
}
// 订单流程
.process {
  width: 900px;
  position: relative;
  margin: 20px auto;
  .item-proce{
    text-align: center;
    background-color: $color-white;
  }
  .bg-c1{
    background-image: url('../../assets/order.png');
    background-repeat: no-repeat;
  }
  .bg-c2{
    background-image: url('../../assets/icon-greyEval.png');
    background-repeat: no-repeat;
  }
  // 未评价图片
  .bg-c3{
    background-image: url('../../assets/icon_lightprocess.png');
    background-repeat: no-repeat;
  }
  // 已评价
  .bg-c4{
    background-image: url('../../assets/icon-eval.png');
    background-repeat: no-repeat;
  }
  .order-img {
    width: 180px;
    height: 41px;
    margin: 8px 0 20px;
  }
  .f-l{
    float: left;
    .fontTitle {
      color: $color-dark;
    }
    .fontTime {
      font-size: 12px;
      color: $color-gray;
    }
  }
}
.order-buyer-info {
  margin: 20px auto 16px;
  border-bottom: 1px solid $border-gray-light;
  padding-bottom: 20px;
  .order-info {
    width: 40%;
    margin: auto;
    .icon-status {
      display: inline-block;
      margin-right: 18px;
    }
    .order-del {
      margin-left: 8%;
      & > span {
        line-height: 22px;
      }
    }
  }
}
.btns-group {
  display: inline-block;
}
.buyer-info {
  width: 320px;
  padding: 0 15px;
  & > span {
    line-height: 22px;
    font-size: 12px;
    color: $color-dark;
  }
}
.buyer-title {
  vertical-align: text-top;
}
.buyer-options {
  margin: 10px auto;
  .free-look {
    width: 120px;
  }
  .dev-look {
    width: 100px;
    margin-right: 16px;
  }
}
.buyer-options-other {
  .t-under {
    font-size: 14px !important
  }
}
.store-info {
  padding-left: 15px;
  font-size: 12px;
  & > div {
    display: inline-block;
    margin-right: 90px;
    margin-bottom: 4px;
    &:last-child {
      margin-right: 0
    }
  }
}
.after-b {
  &:after {
    content: '';
    padding-bottom: 4px;
    width: 1190px;
    position: absolute;
    border-bottom: 1px solid $border-gray-light
  }
}
.orders {
  margin-top: 18px;
}
.tab-bg {
  background-color: #f0f0f0;
  padding-left: 10px;
  table {
    border: none
  }
}
.goods-info {
  .goods-img {
    width: 88px;
    height: 88px;
    margin-right: 14px;
  }
  .goods {
    position: relative;
    text-align: left;
    height: 88px;
    font-size: 12px;
    p {
      font-weight: 500;
    }
    .sku {
      color: $color-dark;
    }
  }
  .update-sku {
    position: absolute;
    bottom: 0;
  }
}
.order-amount {
  border: 1px solid $border-gray-light;
  padding: 18px;
  margin-bottom: 20px;
  .goods-all {
    border-right: 1px solid $border-gray-light;
    padding-right: 48px;
    span {
      line-height: 22px;
      font-size: 12px;
    }
  }
  .order-all {
    font-size: 16px;
    padding-left: 48px;
    p {
      text-align: right;
      line-height: 34px;
    }
  }
}

.p-order-list {
  margin-top: 12px;
  table {
    width: 100%;
    tr {
      border: 1px solid $border-gray-light;
      td {
        height: 114px;
        text-align: center;
        &:nth-child(1) {
          width: 38%;
          padding: 10px;
        }
        &:nth-child(2) {
          width: 14%
        }
        &:nth-child(3) {
          width: 16%
        }
        &:nth-child(4) {
          width: 16%
        }
        &:nth-child(5) {
          width: 16%
        }
      }
    }
  }
  .goods-name {
    text-align: left;
  }
  .input-count {
    width: 72px;
    margin: 0 auto
  }
}
.m-price {
  margin-top: 20px;
  font-size: 12px;
  color: #222222;
  .price {
    width: 80px;
    display: inline-block;
  }
  .change {
    padding: 0 20px 0 10px;
  }
}
.refund-info {
  .refund-del {
    span {
      font-size: 12px;
    }
    .refund-imgs {
      display: inline-block;
    }
    .refund-cause {
      margin-left: 60px;
      display: inline-block;
    }
    ul {
      li {
        width: 46px;
        height: 46px;
        margin-right: 10px;
        display: inline-block;
      }
    }
  }
}
.tip-panel {
  width: 100%;
}
</style>
